import styles from './index.module.less';
import { Form, Button, Tabs } from 'antd';
import { FormPassword, FormEmail, FormVeriCode } from '../FormItem';
import { AccountBookOutlined, CodeOutlined, LockOutlined, MessageOutlined } from '@ant-design/icons';
import { Link } from 'ice';
import store from '@/store';

interface LoginProps {
  showForgetPwd?: boolean;
  showRegister?: boolean;
}

export default function (props: LoginProps) {
  const { showForgetPwd, showRegister } = props;
  const [, dispatch] = store.useModel('security');
  return (
    <div className={styles.loginContainer}>
      <Tabs defaultActiveKey="password" size="large">
        <Tabs.TabPane key="password" tabKey="password" tab="密码登录">
          <Form
            layout="vertical"
            onFinish={(values) => {
              dispatch.login(values);
            }}
          >
            <FormEmail
              required
              name="email"
              fieldKey="email"
              requiredMessage="用户名不能为空"
              wrapperProps={{
                maxLength: 40,
                placeholder: '请输入用户名或者邮箱',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                prefix: <AccountBookOutlined />,
              }}
            />
            <FormPassword
              required
              name="password"
              fieldKey="password"
              requiredMessage="密码不能为空"
              wrapperProps={{
                inputType: 'password',
                placeholder: '请输入密码',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                prefix: <LockOutlined />,
              }}
            />
            <Button block htmlType="submit" type="primary" size="large">
              登录
            </Button>
          </Form>
        </Tabs.TabPane>
        <Tabs.TabPane key="phone" tabKey="phone" tab="免密登录">
          <Form layout="vertical" onFinish={(values) => {}}>
            <FormEmail
              required
              name="email"
              fieldKey="email"
              requiredMessage="邮箱不能为空"
              wrapperProps={{
                placeholder: '请输入邮箱',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                prefix: <MessageOutlined />,
              }}
            />
            <FormVeriCode
              required
              name="validateCode"
              fieldKey="validateCode"
              requiredMessage="验证码不能为空"
              wrapperProps={{
                placeholder: '请输入验证码',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                async onGetVerCode() {
                  return true;
                },
                prefix: <CodeOutlined />,
              }}
            />
            <Button block htmlType="submit" type="primary" size="large">
              登录
            </Button>
          </Form>
        </Tabs.TabPane>
        <Tabs.TabPane key="scan" tabKey="scan" tab="扫码登录">
          <div
            id="qrCode"
            ref={() => {
              window.DDLogin({
                id: 'qrCode',
                goto: encodeURIComponent(
                  `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoi0tcza51z8htszy&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://${location.host}/cm/ding/scanlogin`,
                ),
                style: 'border:none;background-color:#fff;margin-top:-30px;',
                height: 300,
              });
              window.addEventListener(
                'message',
                function (event) {
                  const origin = event.origin;
                  if (origin == 'https://login.dingtalk.com') {
                    const loginTmpCode = event.data;
                    window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoi0tcza51z8htszy&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=${loginTmpCode}`;
                  }
                },
                false,
              );
            }}
          ></div>
        </Tabs.TabPane>
      </Tabs>
      <div className={styles.loginLink}>
        {showRegister && (
          <Link to="/register">
            <span className={styles.linkItem}>用户注册</span>
          </Link>
        )}
        {showForgetPwd && (
          <Link to="/forgetpwd">
            <span className={styles.linkItem}>忘记密码？</span>
          </Link>
        )}
      </div>
    </div>
  );
}
